import React,{Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    View,
    Image,
    Text,
    ListView
}from 'react-native';

let {width, height} = require('Dimensions').get('window');

class  KyListView extends Component{
    constructor(props){
        super(props);
        this.state = {
           dataSource:new ListView.DataSource({
               rowHasChanged:(r1,r2)=>r1!=r2
           })
        }



    }
    render(){
        return (
            <ListView dataSource={this.state.dataSource}
                      renderRow={this._renderRow}></ListView>
        )
    }
    componentDidMount() {
        this._getNetWorkData().then((value)=>{
            console.log(value);
            this.setState({
                dataSource:this.state.dataSource.cloneWithRows(value.data)
            })
        });
    }

    _getNetWorkData(){
        return fetch(this.props.url)
            .then(responseData=>responseData.json())
            .then((responseJson)=>responseJson)
            .catch((error)=>{
                console.log(error)
            })
    }
    _renderRow(rowData,sectionId,rowId,hightLightId){
        let imgUrl = 'http:' + rowData.banner_rsurl;
        let price = '$' + rowData.sale_price
        return (
            <View>
                <Image style={styles.imgStyle} source={{uri:imgUrl}}></Image>
                <Text style={styles.textStyle}>
                    {rowData.product_name}
                </Text>
                <View style={styles.bottomStyle}>
                    <Text style={styles.cityStyle}>{rowData.merchant_city}</Text>
                    <Text style={styles.priceStyle}>{price}</Text>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container:{

    },
    imgStyle:{
        width:width,
        height:220
    },
    textStyle:{
        color:'gray',
        fontSize:16,
        margin:8
    },
    bottomStyle: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        margin:10,



    },
    cityStyle:{
        width:50,
        height:20,
        backgroundColor:'green',
        color:'white',
        textAlign:'center',
        lineHeight:20,
        borderRadius:8,
        overflow:'hidden'
    },
    priceStyle:{
        color:'red',
        fontSize:18
    }

});
KyListView.defaultProps = {
    url:'http://open.yooyo.com/rtapi/outer/router.json?app_key=yooyo_weekend&method=emall.product.list&app_id=2&come_from=2&format=json&from=iOS&partner_id=100&tags=%E4%BC%98%E9%80%89%E8%A1%8C%E7%A8%8B&timestamp=1509875195514&version=5'
}

module.exports = KyListView;
